import {Logs} from "./logsCompnents/Logs"
import Card from './logsCompnents/UI/Card/card'
const App = () => {
    return <div className="logos">
        <Card>
         <Logs></Logs>
        </Card>
    </div>
}
export default App
// <Card>嘿嘿</Card>
//react中的useState() 存储组件自己的状态
// import './app.css'
// import {useState} from 'react'
// const App = () => {
//     console.log('组件渲染了--1111')
//     //使用钩子useState() 返回一个数组[1,function] 第一个值不会触发重新渲染 第二个函数通常命名setCounter
//     const [count,setCounter] = useState(1)
//     const [user, setUser] = useState({name:'试试看',age:18})
//     // let count = 1
//     const addHandler = () => {
//         // count++
//         // setCounter(()=>count+1)
//         //异步更新需要使用回调函数上一个值这样多次点击会更新
//         setTimeout(()=>{
//             setCounter(preCount=>preCount + 1)
//         },1000)
//     }
//     const lessHandler = () => {
//         // count--
//         setCounter(count-1)
//     }
//     const updateUserHandler=() => {
//         //浅拷贝对象
//         // const newUser = Object.assign({},user)
//         // newUser.name="悟空"
//         // setUser(newUser)
//         user.name='空'
//         setUser({...user})
//          // setUser({name:'空空',age:18.1})
//     }
//     return <div className='app'>
//         <h2>{count}-{user.name}--{user.age}</h2>
//         <h1>{count}</h1>
//         <button onClick={addHandler}>+</button>
//         <button onClick={lessHandler}>-</button>
//         <button onClick={updateUserHandler}>更新</button>
//     </div>
// }
// export default App
//在react中获取Dom元素  react中的钩子只能用于函数组件 
// import {useRef} from 'react'
// const App = () => {
//     const h1Ref = useRef()
//     // const h1Ref = {current:null}
//     const clickHandler = () => {
//         h1Ref.current.innerHTML = '嘻嘻'
//     }
//     console.log(h1Ref.current, '13')
//     return <div>
//        <h1 ref={h1Ref}>我是标题</h1>
//        <button onClick={clickHandler}>点我</button>
//     </div>
// }
// export default App

// import React, {Component} from 'react';
// class App extends Component{
//   render(){
//   return (<div>哈哈哈</div>)
//   }
//  }
// export default App
// import React from 'react';
// const App = (props) => {
// return(
// <div>mengdeyijihahahahahah
//     <button>1</button>
//     <button>2</button>
// </div>

//  )
// };
// export default App
